<template>
  <el-form
    :model="formData"
    ref="changeFormRef"
    @submit.prevent
    :rules="formRules"
    label-width="100px"
  >
    <el-row>
      <el-col>
        <el-form-item label="项目名称" prop="projectId">
          <el-select
            v-model="formData.projectId"
            filterable
            clearable
            remote
            style="width: 100%"
            :remote-method="initProjectList"
            @change="changeProject"
          >
            <el-option
              v-for="item in projectArr"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-form-item label="项目编号">
          <el-input
            disabled
            v-model.trim="formData.projectCode"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-form-item label="说明" prop="evaluationReport">
          <el-input v-model.trim="formData.evaluationReport"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-form-item
          label="项目经办人"
          prop="handlederId"
        >
          <el-select
            v-model="formData.handlederId"
            style="width: 100%"
            filterable
            clearable
            remote
            placeholder="请输入姓名搜索"
            :remote-method="getUserData"
            value-key="id"
            @change="changeHandleder"
          >
            <el-option
              id="default-option"
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <template v-if="dialogType == 'evaluate'">
      <el-row>
        <el-col>
          <el-form-item label="附件">
            <ecm-upload
              :files="defaultFileList"
              :docid="docid"
              @setFile="handleSuccess"
            ></ecm-upload>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col>
          <p class="form-tips">后评价发起后，此流程将流转至项目经办人填写相关信息。</p>
        </el-col>
      </el-row>
    </template>
    
    <el-row>
      <el-col>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-row justify="end">
    <el-button @click="handleCancel">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确认</el-button>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import { postProjectList } from "/@/api/project";
import { getUsersForScience } from "/@/api/user";
import EcmUpload from "/@/components/ecmUpload/index.vue";
export default defineComponent({
  name: "evaluateDialog",
  emits: ["submit", "cancel"],
  components:{EcmUpload},
  props:{
    dialogType:{
      type:String,
      default:"evaluate"
    }
  },
  setup(props, ctx) {
    const changeFormRef = ref<HTMLFormElement | null>(null) as any;
    let userList = ref([]); // 人员列表数据
    let defaultFileList = ref([]);
    let state = reactive({
      docid: window["ecmDocType"].project,
      projectArr: [],
      formData: {
        projectObj: null,
        projectCode: "",
        remark: "",
        projectId: "",
        evaluationReport: "",
        handlederId:"",
        evaluationAttachment:null as any
      },
      formRules: {
        projectId: [
          { required: true, message: "请选择要变更的项目", trigger: "change" }
        ],
        evaluationReport: [
          { required: true, message: "请输入说明", trigger: "change" }
        ],
        handlederId: [
          { required: true, message: "请选择项目经办人", trigger: "change" }
        ]
      }
    });

    //获取项目
    const initProjectList = async query => {
      try {
        const { code, data } = await postProjectList({
          projectNameLike: "",
          projectCodeLike: "",
          createUserNameLike: "",
          projectTypeCode: "",
          stageStatus:"5",
          stageApproveStatus:"1",
          isFilings:"1",
          pageSize: 0,
          pageNum: 1
        });
        if (code === 200) {
          state.projectArr = data.list
        }
      } catch (err) {
        console.log(err);
      }
    };

    //选择项目，获取项目code
    const changeProject = item => {
      state.formData.projectObj = state.projectArr.find(
        el => el.id === item
      );
      state.formData.projectCode = state.formData.projectObj.projectCode;
    };

    const getUserData = async (query = "") => {
      if (!query) {
        userList.value = [];
        return;
      }
      try {
        const params = {
          pageNum: 1,
          pageSize: 200,
          name: query
        };
        const { code, data } = await getUsersForScience(params);
        if (code === 200) {
          userList.value = data.list.map(item => {
            return {
              id: item.id,
              name: item.name + (item.deptName ? "-" + item.deptName : "-无"),
              phoneNum: item.phoneNum,
              email: item.email,
              companyName: item.deptName
            };
          });
        }
      } catch (err) {
        console.log(err);
      }
    };

    const handleSuccess = res => {
      defaultFileList.value = res.file;
      state.formData.evaluationAttachment = JSON.stringify(res.file);
    };

    const handleCancel = () => {
      ctx.emit("cancel");
    };

    const handleSubmit = async () => {
      const isValid = await new Promise(resolve =>
        changeFormRef.value.validate(resolve)
      );

      if (isValid) {
        ctx.emit("submit", state.formData);
      }
    };

    onMounted(() => {
      initProjectList("");
    });

    return {
      initProjectList,
      handleCancel,
      changeFormRef,
      changeProject,
      handleSubmit,
      userList,
      getUserData,
      defaultFileList,
      handleSuccess,
      ...toRefs(state)
    };
  }
});
</script>
<style lang="scss" scoped>
.btnClass {
  margin-bottom: 10px;
}
.form-tips{
  padding-left: 100px;
  margin-bottom: 18px;
  color: #999;
  font-size: 14px;
}
</style>
